<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" label-width="78px" @submit.native.prevent>
            <el-form-item label="检测批次">
                <el-date-picker
                    v-model="form.detectionBatch"
                    type="year"
                    format="yyyy年路网检测"
                    value-format="yyyy年路网检测"
                    :clearable="true"
                    placeholder="请选择"
                    :picker-options="datePickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="公路">
                <AssetsRoadSelect :value.sync="form.highwayCode" clearable placeholder="请选择" />
            </el-form-item>
            <el-form-item label="管养单位">
                <CustodyOrgSelect :value.sync="form.orgName" :is-label="true" clearable></CustodyOrgSelect>
            </el-form-item>
            <el-form-item label="起点桩号">
                <el-row class="filter-stake">
                    <el-col :span="12" class="start-stake">
                        <el-input
                            v-model="form.startStake1"
                            clearable
                            type="number"
                            oninput="if(value.length > 3) value = value.slice(0, 3)"
                            @keydown.native="onKeydown($event)"
                        >
                            <template slot="prepend">K</template>
                        </el-input>
                    </el-col>
                    <el-col :span="12" class="end-stake">
                        <el-input
                            v-model="form.startStake2"
                            clearable
                            type="number"
                            oninput="if(value.length > 3) value = value.slice(0, 3)"
                            @keydown.native="onKeydown($event)"
                        >
                            <template slot="prepend">+</template>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="终点桩号">
                <el-row class="filter-stake">
                    <el-col :span="12" class="start-stake">
                        <el-input
                            v-model="form.endStake1"
                            clearable
                            type="number"
                            oninput="if(value.length > 3) value = value.slice(0, 3)"
                            @keydown.native="onKeydown($event)"
                        >
                            <template slot="prepend">K</template>
                        </el-input>
                    </el-col>
                    <el-col :span="12" class="end-stake">
                        <el-input
                            v-model="form.endStake2"
                            clearable
                            type="number"
                            oninput="if(value.length > 3) value = value.slice(0, 3)"
                            @keydown.native="onKeydown($event)"
                        >
                            <template slot="prepend">+</template>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in DirectionOptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="路面类型">
                <el-select v-model="form.pavementType" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in RoadTypeOptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="技术等级">
                <el-select v-model="form.roadType" placeholder="请选择" clearable style="width: 100%">
                    <el-option v-for="d in TechnologyLevelOptions" :key="d.value" :label="d.label" :value="d.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="技术指标">
                <el-row class="three-level-linkage">
                    <el-col :span="6" class="linkage-item right-radius-0" :class="{ zIndex10: current === 1 }">
                        <el-select v-model="form.indicator" placeholder="请选择" clearable style="width: 100%" @focus="current = 1">
                            <el-option v-for="item in TechnicalIndex2Options" :key="item.value" :label="item.label" :value="item.label" />
                        </el-select>
                    </el-col>
                    <el-col :span="8" class="linkage-item left-right-radius-0" :class="{ zIndex10: current === 2 }">
                        <el-select v-model.number="form.indicatorRange" placeholder="请选择" clearable style="width: 100%" @focus="current = 2">
                            <el-option v-for="item in DataRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-col>
                    <el-col :span="10" class="linkage-item left-radius-0" :class="{ zIndex10: current === 3 }">
                        <el-input v-model.number="form.indicatorValue" type="number" placeholder="请输入" clearable @focus="current = 3"></el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c50_d229_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c50_d229_2' }" type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>

        <div slot="button">
            <BaseButton v-permission="{ btnCode: 'dlyh_c50_d226_2' }" @click="handleAdd">新增决策单元</BaseButton>
            <BaseButton v-permission="{ btnCode: 'dlyh_c50_d227_2' }" type="second" :loading="downloadLoading" @click="handleDownload">导出</BaseButton>
            <BaseButton v-permission="{ btnCode: 'dlyh_c50_d228_2' }" style="margin-right: 8px" :disabled="selectionList.length === 0" type="second" @click="handleDelete">
                删除
            </BaseButton>
        </div>

        <!--数据列表区-->
        <BaseTable
            slot="table"
            v-loading="listLoading"
            :columns="columns"
            :data="list"
            row-key="id"
            height="calc(100% - 73px)"
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
            <template #handle="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: '' }" type="text" @click="handleEdit(row.id)">修改</BaseButton>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @current-change="getList"
            @size-change="getList"
        />
        <SaveOrUpdate ref="dialog" @success="handleFilter"></SaveOrUpdate>
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import ExcelImport from '@/components/ExcelImport'
import reconfirm from '@/utils/reconfirm'
import { RoadSectionSelectModel } from '@/models'
import { RoadSectionSelectApi } from '@/api'
import downLoad from '@/utils/blob-download'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import { DirectionOptions } from '@/config/constants'
import { RoadTypeOptions, TechnicalIndex2Options, DataRangeOptions } from '@/views/technical-evaluation/constants'
import { TechnologyLevelOptions } from '@/views/auxiliary-decision/constants'
import SaveOrUpdate from './SaveOrUpdate'

export default {
    name: 'RoadSectionSelectList',
    components: {
        BasePage,
        ExcelImport,
        SaveOrUpdate
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                detectionBatch: '',
                highwayCode: '',
                orgName: '',
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: '',
                detectionType: '',
                direction: '',
                pavementType: '',
                roadType: '',
                indicator: '',
                indicatorRange: '',
                indicatorValue: ''
            },
            conditionObjKey: 'form'
        })
    ],
    data() {
        return {
            RoadTypeOptions,
            DirectionOptions,
            DataRangeOptions,
            TechnicalIndex2Options,
            TechnologyLevelOptions,
            downloadLoading: false,
            templateLoading: false,
            model: new RoadSectionSelectModel(),
            api: new RoadSectionSelectApi(),
            form: {
                detectionBatch: '',
                highwayCode: '',
                orgName: '',
                startStake1: '',
                startStake2: '',
                endStake1: '',
                endStake2: '',
                detectionType: '',
                direction: '',
                pavementType: '',
                roadType: '',
                indicator: '',
                indicatorRange: '',
                indicatorValue: ''
            },
            datePickerOptions: {
                disabledDate(date) {
                    return date.getFullYear() > new Date().getFullYear()
                }
            },
            current: 1,
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection',
                        width: '56'
                    }
                },
                {
                    attrs: {
                        prop: 'detectionBatch',
                        label: '检测批次',
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'detectionType',
                        label: '检测类型',
                        width: '150'
                    }
                },
                {
                    attrs: {
                        prop: 'highwayCode',
                        label: '公路编码',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'highwayName',
                        label: '公路名称',
                        'show-overflow-tooltip': true,
                        'min-width': '130'
                    }
                },
                {
                    attrs: {
                        prop: 'startStakeNo',
                        label: '起点桩号',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'endStakeNo',
                        label: '终点桩号',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'length',
                        label: '单元长度（m）',
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'roadType',
                        label: '技术等级',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'orgName',
                        label: '管养单位',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'openingTime',
                        label: '通车时间',
                        width: '100'
                    }
                },

                {
                    attrs: {
                        prop: 'direction',
                        label: '方向',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'lane',
                        label: '车道',
                        'show-overflow-tooltip': true,
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'pavementType',
                        label: '路面类型',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'maintYear',
                        label: '养护年度',
                        width: '100'
                    }
                },
                {
                    attrs: {
                        prop: 'nowPavementStructure',
                        label: '路面结构现状',
                        'show-overflow-tooltip': true,
                        'min-width': '140'
                    }
                },
                {
                    attrs: {
                        prop: 'pqi',
                        label: 'PQI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'pci',
                        label: 'PCI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'rqi',
                        label: 'RQI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'rdi',
                        label: 'RDI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'pbi',
                        label: 'PBI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'pwi',
                        label: 'PWI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'sri',
                        label: 'SRI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'pssi',
                        label: 'PSSI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'dr',
                        label: 'DR',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'iri',
                        label: 'IRI',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'rd',
                        label: 'RD',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'pb1',
                        label: 'PB1',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'pb2',
                        label: 'PB2',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'pb3',
                        label: 'PB3',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'wr',
                        label: 'WR',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'sfc',
                        label: 'SFC',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'ssr',
                        label: 'SSR',
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'pqiEvaluationGrade',
                        label: 'PQI分级',
                        width: '90'
                    }
                },
                {
                    attrs: {
                        prop: 'pciEvaluationGrade',
                        label: 'PCI分级',
                        width: '90'
                    }
                },
                {
                    attrs: {
                        prop: 'rqiEvaluationGrade',
                        label: 'RQI分级',
                        width: '90'
                    }
                },
                {
                    attrs: {
                        prop: 'rdiEvaluationGrade',
                        label: 'RDI分级',
                        width: '90'
                    }
                },
                {
                    attrs: {
                        prop: 'pbiEvaluationGrade',
                        label: 'PBI分级',
                        width: '90'
                    }
                },
                {
                    attrs: {
                        prop: 'pwiEvaluationGrade',
                        label: 'PWI分级',
                        width: '90'
                    }
                },
                {
                    attrs: {
                        prop: 'sriEvaluationGrade',
                        label: 'SRI分级',
                        width: '90'
                    }
                },
                {
                    attrs: {
                        prop: 'pssiEvaluationGrade',
                        label: 'PSSI分级',
                        width: '100'
                    }
                }
            ]),
            selectionList: [],
            paramsData: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            this.setParamsData()
            this.model
                .getList(this.paramsData, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        setParamsData() {
            const { startStake1, startStake2, endStake1, endStake2 } = this.form
            const startStakeNo = startStake1 && startStake2 ? `K${startStake1}+${startStake2}` : ''
            const endStakeNo = endStake1 && endStake2 ? `K${endStake1}+${endStake2}` : ''
            this.paramsData = {
                ...this.form,
                startStakeNo,
                endStakeNo
            }
        },
        onKeydown(e) {
            if (e.key === 'e' || e.key === '-' || e.code === 'Minus') {
                e.preventDefault()
            }
        },
        handleAdd() {
            // this.$router.push({ name: 'TunnelStationAdd' })
            this.$refs['dialog'].open()
        },
        handleEdit(id) {
            this.$refs['dialog'].open({ id, type: 'edit' })
        },
        handleDownload() {
            this.downloadLoading = true
            const path = this.api.customDownloadPath()
            const ids = this.selectionList.map((item) => item.id)
            downLoad(path, { ids, ...this.paramsData }, '路面决策分析路段统计表（导出）', 'Excel', () => {
                this.downloadLoading = false
            })
        },
        handleDelete() {
            reconfirm({
                text: '是否删除当前数据',
                callback: () => {
                    const ids = this.selectionList.map((item) => item.id)
                    return this.model.delete({ ids }).then(() => {
                        this.getList(true)
                        this.$message.success('删除成功!')
                    })
                }
            })
        },
        handleSelectionChange(value) {
            this.selectionList = value
        }
    }
}
</script>

<style lang="scss" scoped>
.three-level-linkage {
    width: 512px;
    .linkage-item {
        position: relative;
        z-index: 1;
        & + .linkage-item {
            margin-left: -1px;
        }
    }
    .zIndex10 {
        z-index: 10;
    }
    .left-radius-0 ::v-deep .el-input__inner {
        border-radius: 0 5px 5px 0;
    }
    .left-right-radius-0 ::v-deep .el-input__inner {
        border-radius: 0;
    }
    .right-radius-0 ::v-deep .el-input__inner {
        border-radius: 5px 0 0 5px;
    }
}
.filter-stake {
    width: 203px;
    ::v-deep {
        .el-input__inner,
        .el-input {
            min-width: auto !important;
            line-height: 1px !important;
        }
        .el-input-group__append,
        .el-input-group__prepend {
            padding: 0 8px;
            color: #44444f;
        }
    }
    .start-stake {
        position: relative;
        z-index: 1;
        margin-right: -1px;
        ::v-deep {
            .el-input__inner,
            .el-input {
                border-radius: 0;
            }
        }
    }
    .end-stake {
        ::v-deep {
            .el-input-group__append,
            .el-input-group__prepend {
                border-radius: 0;
            }
        }
    }
}
</style>
